<template>

  <img @click="testChange" alt="Vue logo" src="src/assets/logo.png">
  <h1>{{ person.name }}</h1>
  <h1>{{ person.sex }}</h1>
  <h1>{{ person.age }}</h1>
  <p>x:{{ mouseData.x }} y:{{ mouseData.y }}</p>

  <!-- 使用vuex的state内数据 -->
  <!--<h1>{{$store.state.username}}</h1>-->

  <!-- 使用vuex的getter方法获取数据 -->
  <p>{{ $store.getters.testGetter }}</p>
  <el-button @click="mutationFn">点击修改</el-button>

  <el-button @click="person.age--" :disabled="person.age===0" type="primary" class="button">点击</el-button>
  <!--  <HelloWorld msg="Welcome to Your Vue.js App"/>-->

</template>


<script>
// import HelloWorld from './components/HelloWorld.vue'
import {onMounted, reactive} from "vue";
import {useStore} from 'vuex'

export default {
  name: 'App',
  setup() {
    const person = reactive({
      name: 'Yuzi',
      age: 18,
      sex: '男'
    })

    const store = useStore();
    console.log(store.state.username);
    const mutationFn = () => {
      // store.commit('updateName')
      store.dispatch('updateName')
    }

    const mouseData = reactive({
      x: 0,
      y: 0
    })

    const move = (e) => {
      mouseData.x = e.pageX;
      mouseData.y = e.pageY;
    }

    onMounted(() => {
      document.addEventListener('mousemove', move)
    })
    onMounted(() => {
      document.addEventListener('mousemove', move)
    })

    const testChange = () => {
      person.age++;
    }

    return {
      person,
      testChange,
      mouseData,
      move,
      mutationFn
    }
  }

  // components: {
  //   HelloWorld
  // }
}
</script>

<style>
.button {
  width: 70px;
  height: 30px;
}

/*#app {*/
/*  font-family: Avenir, Helvetica, Arial, sans-serif;*/
/*  -webkit-font-smoothing: antialiased;*/
/*  -moz-osx-font-smoothing: grayscale;*/
/*  text-align: center;*/
/*  color: #2c3e50;*/
/*  margin-top: 60px;*/
/*}*/
</style>
